<template>
  <div class="container__nearby">
    <div class="container__nearby__title">附近店铺</div>
    <router-link v-for="item of nearbyItems"
                 :key="item.id"
                 :to="`/shop/${item.id}`">
      <shop-info :item="item"
                 :showBorder="true" />
    </router-link>
  </div>
  <toast-view v-if="isShow"
              :message="toastMessage" />
</template>
<script>
import { ref } from 'vue'
import { get } from '../../utils/request'
import ToastView, { showToastEffect } from '@/components/ToastView.vue'
import ShopInfo from '@/components/ShopInfo.vue'
const useNearbyEffect = (showToast) => {
  const nearbyItems = ref([])
  const getNearbyItems = async () => {
    try {
      // 走接口, 获取数据
      const result = await get('/api/home/nearby')
      if (result.data.code === '0000') {
        console.log(result)
        nearbyItems.value = result.data.data
      } else {
        showToast('获取数据失败')
      }
    } catch (error) {
      showToast('请求接口失败!!!')
    }
  }
  getNearbyItems()
  return { nearbyItems }
}

export default {
  name: 'NearbyView',
  components: { ToastView, ShopInfo },
  setup () {
    const { isShow, toastMessage, showToast } = showToastEffect()
    const { nearbyItems } = useNearbyEffect(showToast)
    return { nearbyItems, toastMessage, isShow }
  }
}
</script>
<style lang="scss" scoped>
@import "../../style/mixins.scss";
@import "../../style/variables.scss";
.container__nearby {
  padding: 16rem 18rem;
  &__title {
    font-family: PingFangSC-Medium;
    font-size: 18rem;
    color: $content-fontcolor;
    margin-bottom: 14rem;
  }
  a {
    text-combine-upright: none;
  }
}
</style>
